<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贵美商城登录验证表单</title>
		<style>
			span#d{
				color:red;
			}
		</style>
		<script src="../../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				
				$(".validate").blur(function(){
					let reg = new RegExp("^"+this.pattern+"$",'ig');
					if(reg.test(this.value)){
						$(this).next().html("");
					}else{
						$(this).next().html($(this).next().attr("err-msg"));
					}
				});
				
				//设置名字不包含数字
				// $(":input[name=name]").blur(function(){
				// 	let reg = new RegExp("^"+this.pattern+"$",'ig');
				// 	if(this.value.match(reg)!=null){
				// 		$(this).next().html($(this).next().attr("err-msg"));
				// 	}else{
				// 		$(this).next().html("");
				// 	}
					
				// });
				
				//验证二次密码
				$(":password[name=repass]").blur(function(){
					let ps = $("[name=pass]").val();
					if(this.value !=ps){
						$(this).next().html("两次输入密码不一致，请重新输入!");
					}else{
						$(this).next().html("");
					}
				});
				
				$(":submit").click(function(){
					$(".validate").trigger("blur");
				});
				
			});

		</script>
	</head>
	<body>
		<form action="1.html">
			<p>
				<label>名字</label>
				<input type="text" name="name" placeholder="请输入名字：" class="validate" pattern="[a-zA-Z\u4e00-\u9fa5]{2,10}" required />
				<span id="d" err-msg="姓名不能包含数字"></span>
			</p>
			<p>
				<label>姓氏</label>
				<input type="text" name="user" placeholder="请输入姓氏：" class="validate" pattern="[\d|a-z|A-Z|\u4e00-\u9fa5]+" required />
				<span id="d" err-msg="姓氏不能为空"></span>
			</p>
			<p>
				<label>登录名</label>
				<input type="text" name="username" placeholder="请输入登录名：" class="validate" pattern="\w+" required />
				<span>(可包含 a-z、0-9 和下划线)</span>
				<span id="d" err-msg="不能为空"></span>
			</p>
			
			<p>
				<label>密码</label>
				<input type="password" name="pass" placeholder="请输入密码：" class="validate" pattern="\w{6,}" required />
				<span id="d" err-msg="密码必须等于或大于6个字符"></span>
			</p>
			
			<p>
				<label>再次输入密码</label>
				<input type="password" name="repass" placeholder="请再次输入密码：" pattern="\w{6,}" required />
				<span id="d" err-msg="密码必须等于或大于6个字符"></span>
			</p>
			<label>邮箱：</label>
				<input type="email" name="email" placeholder="请输入邮箱： " class="validate" required
					pattern="[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)" />
				<span id="d"  err-msg="邮箱格式不正确,必须包含@"></span>
			</p>
			<p>
				<button type="submit">注册</button>
			</p>
			
		</form>
	</body>
</html>
